<template>
  <div>
    <el-dialog :visible.sync="isVisible" title="更新用户" center :close-on-press-escape="false" :close-on-click-modal="false">
      <el-form size="mini" status-icon label-position="left" label-width="60px" :model="userForm" :rules="userFormRules" ref="userForm">
        <el-form-item label="账号" prop="username">
          <el-col :span="21">
            <el-input v-model="userForm.username" autocomplete="off" placeholder="账号"/>
          </el-col>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-col :span="21">
            <el-input v-model="userForm.nickname" autocomplete="off" placeholder="昵称"/>
          </el-col>
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
          <el-col :span="21">
            <el-input v-model="userForm.avatar" autocomplete="off" placeholder="头像"/>
          </el-col>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-col :span="21">
            <el-input v-model="userForm.phone" autocomplete="off" placeholder="电话"/>
          </el-col>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-col :span="21">
            <el-input v-model="userForm.email" autocomplete="off" placeholder="邮箱"/>
          </el-col>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-col :span="21">
            <el-radio-group v-model="userForm.sex">
              <el-radio :label="0">男</el-radio>
              <el-radio :label="1">女</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-col :span="21">
            <el-input v-model="userForm.age" autocomplete="off" placeholder="年龄"/>
          </el-col>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-col :span="21">
            <el-select v-model="userForm.status" placeholder="请选择状态">
              <el-option label="正常" :value="0"/>
              <el-option label="冻结" :value="1"/>
              <el-option label="删除" :value="2"/>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="角色" prop="roleIds">
          <el-col :span="21">
            <el-select v-model="userForm.roleIds" multiple placeholder="请选择角色" value-key="id" @change="changeHandle">
              <el-option v-for="item in roles" :key="item.id" :label="item.label" :value="item.id"/>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-checkbox style="margin-left: 12px" v-model="allChecked" @change="checkedAllHandle">全选</el-checkbox>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isVisible = false">取 消</el-button>
        <el-button type="primary" size="mini" :loading="loading" @click="updateHandle('userForm')">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'UserUpdate',
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      userId: {
        type: Number,
        default: null
      }
    },
    computed: {
      isVisible: {
        get() {
          return this.visible
        },
        set(val) {
          this.$emit('update:visible', val)
        }
      }
    },
    watch: {
      isVisible(visible) {
        if (visible) {
          this.getUserHandle()
          this.listRoleNameHandle()
        }
      }
    },
    data() {
      return {
        userForm: {
          id: '',
          username: '',
          password: '',
          nickname: '',
          reallyName: '',
          avatar: '',
          phone: '',
          email: '',
          sex: '',
          age: '',
          status: '',
          // 此用户所拥有的角色id
          roleIds: []
        },
        // 所有角色信息（id、label）
        roles: [],
        // 角色全选标识
        allChecked: false,
        // 修改提交加载动画
        loading: false,
        userFormRules: {
          username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
          password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
          nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
          reallyName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
          avatar: [{ required: true, message: '请输入头像', trigger: 'blur' }],
          phone: [{ required: true, message: '请输入电话', trigger: 'blur' }],
          email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
          sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
          age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
          status: [{ required: true, message: '请选择状态', trigger: 'blur' }],
          roleIds: [{ required: true, message: '请选择角色', trigger: 'blur' }]
        }
      }
    },
    methods: {
      getUserHandle() {
        this.AjaxUtils.get('/user/getUser', { userId: this.userId }).then((response) => {
          this.userForm = response.data
        }).catch(() => {
          console.error('服务器错误')
        })
      },
      listRoleNameHandle() {
        this.AjaxUtils.get('/role/listRoleName').then((response) => {
          this.roles = response.data
        }).catch(() => {
          console.error('服务器错误')
        })
      },
      changeHandle(changeData) {
        this.allChecked = changeData.length === this.roles.length
      },
      checkedAllHandle(allChecked) {
        if (allChecked) {
          this.userForm.roleIds = []
          this.roles.forEach(item => {
            this.userForm.roleIds.push(item.id)
          })
        } else {
          this.userForm.roleIds = []
        }
      },
      updateHandle(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // params
            // ajax
            // todo this.userForm 传参后台接收不到
            this.loading = true
            this.AjaxUtils.put('/user/updateUser', this.userForm, true).then((response) => {
              this.loading = false
              this.isVisible = false
              this.$emit('reloadTable')
              console.log(response)
            }).catch(() => {
              this.loading = false
              console.error('服务器错误')
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .el-select {
    width: 100%;
  }
</style>
